﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Easy_UI/css/easyui.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/icon.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/menu.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/Easy_UI/js/datapattern.js"></script>
    <script src="~/Content/Easy_UI/js/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/Easy_UI/js/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
    $(function () {
        //隐藏添加,修改From表单
        $("#addDiv").css("display", "none");
        $("#editDiv").css("display", "none");

        loadData();
    });
     
    //加载数据
    function loadData(pars) {
        $('#tt').datagrid({
            url: '/UserInfo/ShowAllUser',
            title: '用户数据',
            width: 800,
            height: 505,
            fitColumns: true, //列自适应
            nowrap: false,
            idField: 'Id',//主键列的列明
            loadMsg: '正在加载用户的信息...',
            pagination: true,//是否有分页
            singleSelect: false,//是否单行选择
            pageSize: 5,//页大小，一页多少条数据
            pageNumber: 1,//当前页，默认的
            pageList: [5, 10, 15],
            queryParams: pars,//往后台传递参数
            columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                { field: 'ck', checkbox: true, align: 'left', width: 50 },
                { field: 'Id', title: '编号', width: 80 },
                { field: 'UName', title: '用户名', width: 120 },
                { field: 'ShowName', title: '姓名', width: 120 }
            ]],
            toolbar: [{
                id: 'btnDelete',
                text: '删除',
                iconCls: 'icon-remove',
                handler: function () {
                    deleteInfo();
                }
            }, {
                id: 'btnAdd',
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    addInfo();
                }
            }, {
                id: 'btnEidt',
                text: '编辑',
                iconCls: 'icon-edit',
                handler: function () {

                    showEditInfo();//展示要修改的用户数据
                }
            }],
        });
    }

    //删除数据
    function deleteInfo() {
        var rows = $('#tt').datagrid('getSelections');//获取所选择的行
        if (!rows || rows.length == 0) {
            //alert("请选择要删除的商品！");
            $.messager.alert("提醒", "请选择要删除的记录!", "error");
            return;
        }

        $.messager.confirm("提示", "确定要删除数据吗？", function (r) {
            if (r) {
                //要删除数据，获取要删除的记录的Id
                var strId = "";
                for (var i = 0; i < rows.length; i++) {
                    strId = strId + rows[i].Id + ",";
                }
                //去掉最后一个逗号“，”
                strId = strId.substr(0, strId.length - 1);
                //将获取的要删除的记录的Id值发送到服务端
                $.post("/UserInfo/Delete", { "strId": strId }, function (data) {
                    if (data == "ok") {
                        //"reload"方法加载表格不会跳转到第一页
                        $('#tt').datagrid("reload");

                        //清除上次操作的历史的记录 异步请求会把上次操作的id继续带上
                        $('#tt').datagrid('clearSelections');
                    }
                    else {
                        $.messager.alert("提醒", "删除失败！", "error")
                    }
                });
            }
        });
    }

    //添加数据
    function addInfo() {
        $("#addDiv").css("display", "block");

        //添加用户的操作是一个异步操作 清空文本框
        $("addForm input").val("");

        $("#addDiv").dialog({
            collapsible: true,//可折叠
            maximizable: true,//可最大化
            minimizable: true,//可最小化
            resizable: true,//可缩放
            modal: true,//制造一种模态
            buttons: [{
                text: "确定",
                iconCls: "icon-ok",
                handler: function (data) {
                    //在表单提交之前要校验数据的合理性
                    validateInfo($("#addForm"));

                    $("#addForm").submit();//提交表单
                }
            }, {
                text: '取消',
                handler: function () {
                    $("#addDiv").dialog("close");
                }
            }]
        });
    }

    //完成添加后调用该方法
    function afterAdd(data) {
        if (data = "ok") {
            $("#addDiv").dialog("close");
            $.messager.alert("提示", "添加成功");
            //"reload"方法加载表格不会跳转到第一页
            $('#tt').datagrid("reload");

            //添加用户的操作是一个异步操作 清空文本框
            $("addForm input").val("");
        }
        else {
            $.messager.alert("提示", "添加失败");
        }
    }

    //表单校验
    function validateInfo(control) {
        control.validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
            rules: {//表示验证规则
                UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                ShowName:"required",
                UPwd: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                UName: "请输入用户名",
                ShowName:"请输入姓名",
                UPwd: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于{0}个字符")
                }
            }
        });
    }

    //展示要修改的用户数据
    function showEditInfo() {
        //在弹窗之前要拿到要修改的用户的数据
        //判断一下用户是否选择了要修改的数据
        var rows = $("#tt").datagrid("getSelections");//获取所选择的行
        if (rows.length != 1) {
            $.messager.alert("提示", "请选择要修改的数据", "error");
            return;//跳出此方法
        }

        //将要修改的数据查询出来，显示到文本框中
        var id = rows[0].Id;
        $.get("/UserInfo/EditUser", { "id": id }, function (data) {
            //这里其实返回回来的是一个json对象,进行数据绑定
            $("#txtId").val(data.Id);
            $("#txtDelFlag").val(data.DelFlag);
            $("#txtUName").val(data.UName);
            $("#txtShowName").val(data.ShowName);
            $("#txtPassWord").val(data.PassWord);
        });

        $("#editDiv").css("display", "block");
        $("#editDiv").dialog({
            collapsible: true,//可折叠
            maximizable: true,//可最大化
            minimizable: true,//可最小化
            resizable: true,//可缩放
            modal: true,//制造一种模态
            buttons: [{
                text: "ok",
                iconCls: "icon-ok",
                handler: function (data) {
                    //在表单提交之前要校验数据的合理性
                    validateInfo($("#editForm"));

                    $("#editForm").submit();//提交表单
                }
            }, {
                text: 'Cancel',
                handler: function () {
                    $("#editDiv").dialog("close");
                }
            }]
        });
    }

    //更新以后调用的方法
    function afterEdit(data) {
        if (data = "ok") {
            $("#editDiv").dialog("close");
            $.messager.alert("提示", "更新成功");
            //"reload"方法加载表格不会跳转到第一页
            $('#tt').datagrid("reload");
        }
        else {
            $.messager.alert("提示", "更新失败");
        }
    }
    </script>
</head>
<body>
    <div>
        <table id="tt" style="width:600px;" title="标题" iconcls="icon-edit"></table>
    </div>
    <!-----------------------添加数据------------------------------>
    <div id="addDiv" style="width:400px;height:300px;" title="添加用户数据">
        @using (Ajax.BeginForm("AddUser", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><th>用&nbsp;户&nbsp;名:</th><td><input type="text" name="UName" /></td></tr>
                <tr><th>姓&nbsp;名:</th><td><input type="text" name="ShowName" /></td></tr>
            </table>
        }

    </div>

    <!-----------------------修改数据------------------------------>
    <div id="editDiv" style="width:400px;height:300px;" title="修改用户数据">
        @using (Ajax.BeginForm("EditUser", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
        {
            <input type="hidden" name="Id" id="txtId" />
            <input type="hidden" name="DelFlag" id="txtDelFlag" />
            <table>
                <tr><th>用&nbsp;户&nbsp;名:</th><td><input type="text" name="UName" id="txtUName" /></td></tr>
                <tr><th>密&nbsp;码:</th><td><input type="password" name="PassWord" id="txtPassWord" /></td></tr>
                <tr><th>姓&nbsp;名:</th><td><input type="text" name="ShowName" id="txtShowName" /></td></tr>
            </table>
        }
    </div>
</body>
</html>
